<template>
    <div class="content">
        <div ref="charts" style="width: 800px; height: 800px"></div>
    </div>
</template>
  
  
<script>
import * as echarts from "echarts";
// -导入的外部 地图文件  下载地址 https://www.isqqw.com/
import china from "../../assets/china.json"
export default {
    data() {
        return {
            points: [ //- 散点图数据  增加散点图数据 同时定义sersis属性
                { name: '新疆', value: [87.628579, 43.793301], itemStyle: { color: '#00EEFF' } }, // 新疆
                { name: '四川', value: [104.076452, 30.651696], itemStyle: { color: '#00EEFF' } }, // 四川
                { name: '甘肃', value: [103.826777, 36.060634], itemStyle: { color: '#00EEFF' } }, // 甘肃
                { name: '云南', value: [102.709372, 25.046432], itemStyle: { color: '#00EEFF' } }, // 云南
                { name: '广西', value: [108.327537, 22.816659], itemStyle: { color: '#00EEFF' } }, // 广西
                { name: '湖南', value: [112.982951, 28.116007], itemStyle: { color: '#00EEFF' } }, // 湖南
                { name: '山东', value: [117.020725, 36.670201], itemStyle: { color: '#00EEFF' } }, // 山东
                { name: '河南', value: [113.753094, 34.767052], itemStyle: { color: '#00EEFF' } }, // 河南
                { name: '山西', value: [112.578781, 37.813948], itemStyle: { color: '#00EEFF' } }, // 山西
                { name: '福建', value: [119.296194, 26.101082], itemStyle: { color: '#00EEFF' } }, // 福建
                { name: '浙江', value: [120.152575, 30.266619], itemStyle: { color: '#00EEFF' } }, // 浙江
                { name: '江苏', value: [118.763563, 32.061377], itemStyle: { color: '#00EEFF' } }, // 江苏
                { name: '北京', value: [116.407387, 39.904179], itemStyle: { color: '#A6283F' } }, // 北京
                { name: '陕西', value: [108.953939, 34.266611], itemStyle: { color: '#00EEFF' } }, // 陕西
                { name: '广东', value: [113.266887, 23.133306], itemStyle: { color: '#00EEFF' } } // 广东
            ],
            linesData: [//- 线条数据
                { coords: [[116.407387, 39.904179], [87.628579, 43.793301]] },// 北京->新疆
                { coords: [[116.407387, 39.904179], [104.076452, 30.651696]] },// 北京->四川
                { coords: [[116.407387, 39.904179], [103.826777, 36.060634]] },// 北京->甘肃
                { coords: [[116.407387, 39.904179], [102.709372, 25.046432]] },// 北京->云南
                { coords: [[116.407387, 39.904179], [108.327537, 22.816659]] },// 北京->广西
                { coords: [[116.407387, 39.904179], [112.982951, 28.116007]] },// 北京->湖南
                { coords: [[116.407387, 39.904179], [117.020725, 36.670201]] },// 北京->山东
                { coords: [[116.407387, 39.904179], [113.753094, 34.767052]] },// 北京->河南
                { coords: [[116.407387, 39.904179], [112.578781, 37.813948]] },// 北京->山西
                { coords: [[116.407387, 39.904179], [119.296194, 26.101082]] },// 北京->福建
                { coords: [[116.407387, 39.904179], [120.152575, 30.266619]] },// 北京->浙江
                { coords: [[116.407387, 39.904179], [118.763563, 32.061377]] },// 北京->安徽
                { coords: [[116.407387, 39.904179], [113.266887, 23.133306]] },// 北京->广东
                { coords: [[116.407387, 39.904179], [108.953939, 34.266611]] }// 北京->陕西
            ],
            planePath: // -飞机svg -作为线条特效中的标记 作为图表素材加入
                'path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z',
        }
    },
    created() {
        this.$nextTick(() => {
            this.initCharts();
        })
    },
    methods: {
        // -首先初始化地图 对地图进行配置 然后注册地图 最后使用配置
        initCharts() {
            const charts = echarts.init(this.$refs["charts"]);
            const option = {
                // -地图中有两个属性 1.背景颜色 2.geo
                backgroundColor: '#0e2152',
                // -地图配置
                geo: {
                    map: 'china',
                    label: {//-图形上的文本标签
                        normal: {//-通常状态下的样式
                            show: true,
                            textStyle: {
                                color: '#fff'
                            }
                        },
                        emphasis: {//-鼠标放上去的样式
                            textStyle: {
                                color: '#fff'
                            }
                        }
                    },
                    itemStyle: {//-地图区域的样式设置
                        normal: {
                            borderColor: '#5089EC',
                            borderWidth: 1,
                            areaColor: {//-地图区域的颜色
                                type: 'radial',//-径向渐变
                                x: 0.5,//-圆心
                                y: 0.5,//-圆心
                                r: 0.8,//-半径  
                                colorStops: [
                                    {//-0% 处的颜色
                                        offset: 0,
                                        color: 'rgba(0,102,154,0)'
                                    },
                                    {//-100% 处的颜色
                                        offset: 1,
                                        color: 'rgba(0,102,154,0)'
                                    }
                                ]
                            }
                        },
                        emphasis: {
                            areaColor: '#2386ad',
                            borderWidth: 1
                        }
                    }
                },
                series: [
                    {
                        type: 'effectScatter',//-带有联谊特效动画的散点图（气泡）图
                        coordinateSystem: 'geo',//-该系列使用的坐标系。地理坐标系
                        effectType: 'ripple',//-特效类型 目前只支持ripple
                        showEffectOn: 'render',//-配置何时显示特效。 render-绘制完成后显示特效 ，emphasis-高亮时显示特效
                        rippleEffect: {//-涟漪特效相关配置
                            color: '',//-涟漪的颜色
                            number: 3,//-涟漪波纹的数量
                            period: 10,//-动画的周期 秒数
                            scale: 3,//-动画中博文的最大缩放比例
                            brushType: 'fill',//-波纹的绘制方式 可选 ‘stroke-描边’ 'fill-填充'
                        },
                        zlevel: 1,//-所有图形的值 zlevel 大的 Canvas 会放在 zlevel 小的 Canvas 的上面。
                        data: this.points
                    },
                    {//-线条系列数据
                        type: 'lines',
                        zlevel: 2,
                        symbol: ['none', 'arrow'],//-标记图形 'circle-圆形', 'rect-方块', 'roundRect-圆形方块', 'triangle-三角形', 'diamond-菱形', 'pin-水滴', 'arrow-箭头', 'none'
                        symbolSize: 1,//-标记图形大小
                        effect:{//-线条特效配置
                            show:true,
                            period:6,
                            trailLength:0,//-特效尾迹的长度 取值【0-1】值越大 尾迹越重
                            symbol:this.planePath,//-特效图形的标记 可选‘circle’
                            symbolSize:15//-特效标记大小
                        },
                        lineStyle: {//-线条样式
                            normal: {
                                color: '#93ebf8',
                                width: 2.5,//-线条宽度
                                opacity: 0.7,//-线条透明颜色
                                curveness: 0.2,//-线条的取值度
                            }
                        },
                        data: this.linesData
                    }
                ]
            };
            // -地图注册 第一个参数的名字必须和 option.geo.map一致
            echarts.registerMap('china', china)
            charts.setOption(option);
        },
    },
};
</script>
  
  